<template>
  <div class="middle">
    <div class="middlebg"></div>
    <el-tabs type="card">
      <div>
        <span slot="label" class="title1" @click="constitution">数据统计</span>
        <span slot="label" class="title1" @click="student">学生数据</span>
        <span slot="label" class="title1 planTitle" @click="importData">数据导入</span>
      </div>
      <div class="model">
        <a href="/api/template/primaryTemplate">数据导入模板</a>
        <!--<a href="/api/template/juniorHighTemplate">初中数据导入模板</a>-->
      </div>
      <div style="height: 70px">
        <div style="display: inline-block; float: left">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="学年">
              <el-select placeholder="学年" v-model="yearId" clearable @change ="getYearId">
                <el-option v-for="item in schoolYearInfo" :label="item.year" :value="item.id" :key ="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级">
              <el-select placeholder="年级" v-model="gradeId" clearable  @change="getClassId">
                <el-option v-for ="item in gradeInfo" :label="item.grade_title" :value="item.id" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <el-upload
          class="upload-demo upload"
          ref="upload"
          :action="url"
          :headers="header"
          :data ='data'
          name="excel"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="excel"
          :on-success="success"
          :on-error ="error"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-loading.fullscreen.lock="loading"><i class="el-icon-check"></i>导入</el-button>
        </el-upload>
      </div>
      <div class="surface">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="section" label="学年" width="220" align="center"></el-table-column>
          <el-table-column prop="className" label="年级" width="220" align="center"></el-table-column>
          <el-table-column prop="sum" label="数据量" width="220" align="center"></el-table-column>
          <el-table-column prop="time" label="导入时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="del(scope.row.identifying,scope.row.school_year_id,scope.row.class_id)" type="success" plain size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination class="fenye"
       @size-change="SizeChange"
       @current-change="currentChange"
       :current-page="page"
       :page-sizes="pagesizes"
       :page-size="rows"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total">
      </el-pagination>
    </el-tabs>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        // http://pcprograme.tijian121.com/api/constitution/import
        url:'http://pcprograme.tijian121.com/api/constitution/import',
        cur:0 ,//默认选中第一个tab
        //下拉框
        yearType:'all',
        schoolYearInfo:[],
        yearId:'',
        gradeInfo:[],
        gradeId:'',
        value:'',
        excel: [],//导入数据
        data:{
          schoolYearId:'',
          gradeId:'',
        },
        header:{
          'token':window.sessionStorage.getItem('token')
        },
        list:[],//数据导入列表页
        rows:6,//每页几条
        page:1,//当前显示页数
        pagesizes:[6,12,18,24],//更改每页显示条数
        total:20,//一共多少条,
        loading:false,
      };
    },
    methods: {
      //获取学年
      getYear(){
        this.$http.post('/api/constitution/schoolYearInfo',{
          type:this.yearType,
        }).then(res=>{
          this.schoolYearInfo = res.data.data.schoolYearInfo
          this.gradeInfo = res.data.data.gradeInfo
        })
      },
      getList(){
        this.$http.post('/api/constitution/counts',{
          rows:this.rows,
          page:this.page
        }).then(res=>{
          this.list = res.data.data
          this.total = res.data.total

        })
      },
      //数据统计
      constitution(){
        this.$router.push({name:'constitution'})
      },
      //学生数据
      student(){
        this.$router.push({name:'stu_data'})
      },
      //学年改变
      getYearId(){
        this.data.schoolYearId = this.yearId
      },
      //班级改变
      getClassId(){
        this.data.gradeId = this.gradeId
      },
      //导入数据
      importData(){
        this.$router.push({name:'data_import'})
      },
      //导入文件
      submitUpload() {
        this.$refs.upload.submit();
        this.loading = true;
      },
      success(response, file, fileList){
        this.loading = false;
        this.$refs.upload.clearFiles()
        if(response.code == 200){
          this.$message({
            type: 'success',
            message:response.msg
          });
          this.getList()

        }else if(response.errorCode == 400){
          this.$message({
            type: 'error',
            message:response.msg
          });
        }
      },
      error(err, file, fileList){
        this.loading = false;
        console.log(err)
      },
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      //每页显示条数
      SizeChange(val){
        this.rows = val
        this.getList()
      },
      //切换第几页
      currentChange(val){
        this.page = val
        this.getList()
      },
      //删除
      del(identifying,school_year_id,class_id){
        this.$confirm('是否永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/api/constitution/delcounts', {
            identifying:identifying,
            school_year_id:school_year_id,
            grade_id:class_id
          }).then(res=>{
            if(res.data.code == 200){
              this.$message({
                type: 'success',
                message: res.data.msg
              });
              this. getList()
            }else if(res.data.errorCode == 400){
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

    },

    created(){
      this.getYear()
      this.getList()
    }
  };
</script>
<style lang="less" scoped>
  .middle {
    height: 98%;
    width: 96%;
    background:repeat center top;
    background-size: contain;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    .middlebg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: url(../../assets/image/bg-img.png) no-repeat center;
      background-size: 100%;
    }
    /deep/.el-tabs.el-tabs--card.el-tabs--top {
      background: #fff;
    }

    /deep/.el-tabs__content {
      padding: 0 20px;
      position: relative;
    }
    .title1 {
      display: inline-block;
      padding: 0 10px;
      margin-bottom: 20px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &:hover {
        background: #00b02d;
        color: #fff;
      }
    }
    .planTitle {
      color: #fff;
      background: #00B02D;
    }
    .model {
      position: absolute;
      top: 10px;
      right: 20px;
      a {
        color: dodgerblue;
        text-decoration: underline;
      }
    }
    .upload {
      display: inline-block;
      padding-left: 50px;
    }
    .fenye {
      margin: 20px 0;
      text-align: center;
    }
  }
</style>

